<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>保龄球-含输入组件</title>
    <!-- 使用CDN的ElementPlus样式，也可以把文件下载到本地再引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <style>
        /* 取消浏览器的默认样式 */
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            display: flex;
        }

        .box>li {
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <!-- 子组件模板 -->
    <template id="roll-input">
        <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
                <span>{{title}}:{{modelValue}}</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleClick('X')">X</el-dropdown-item>
                    <el-dropdown-item @click="handleClick('-')">-</el-dropdown-item>
                    <el-dropdown-item @click="handleClick('/')">/</el-dropdown-item>
                    <el-dropdown-item>
                        <el-input-number v-model="numValue" @change="handleChange" :min="min" :max="9" />
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </template>

    <main id="app">
        <div>
            <div>
                <roll-input v-model="formData.roll1"></roll-input>
                <roll-input v-model="formData.roll2" v-if="isShow" title="第二投"></roll-input>
            </div>
            <div>
                <el-button @click="handleSubmit" type="primary">确认</el-button>
            </div>
        </div>
        <ul class="box">
            <li>
                <h3>轮次</h3>
                <p>第一投</p>
                <p>第二投</p>
                <p>分数</p>
            </li>
            <li v-for="(item,idx) in tableData">
                <h3>{{getTurn(idx)}}</h3>
                <p>{{item.roll1}}</p>
                <p>{{item.roll2 ? item.roll2 : '&nbsp'}}</p>
                <p>{{item.score}}</p>
            </li>
        </ul>
    </main>

</body>
<!-- 使用CDN的Vue3，也可以把文件下载到本地再引入 -->
<script src="https://unpkg.com/vue@3"></script>
<!-- 使用CDN的ElementPlus库，也可以把文件下载到本地再引入，记得先引入Vue3 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 图标 -->
<script src="https://unpkg.com/@element-plus/icons-vue"></script>
<script>
    // 从Vue中引入需要使用的方法（ES6的解构赋值）
    const { createApp, reactive, ref, computed } = Vue;

    // ElementPlus图标
    const { ArrowDown } = ElementPlusIconsVue


    // 定义创建Vue的选项对象
    const App = {
        // vue3 只需要提供一个setup函数即可
        setup() {
            let tableData = reactive([]);

            const formData = reactive({
                roll1: "",
                roll2: "",
            });

            // 如果第一个投没有选或者全中的话，那么不展示第二投选项
            const isShow = computed(() => {
                return formData.roll1 != 'X' && formData.roll1 != ''
            })



            function getTurn(i) {
                if (i <= 9) {
                    return `第${i + 1}轮`;
                } else {
                    return "奖励轮"
                }
            }

            function handleSubmit() {
                tableData.push({...formData});
                formData.roll1 = "";
                formData.roll2 = "";
            }



            // setup()函数，必须return一个对象，对象中的属性可以在模板中进行使用
            return {
                tableData,
                getTurn,
                formData,
                handleSubmit,
                isShow
            }
        }
    }

    // 利用选项对象，和创建方法，创建Vue对象
    const app = createApp(App);

    // 使用ElementPlus
    app.use(ElementPlus);
    // 注册图标
    app.component("arrow-down", ArrowDown);


    app.component('roll-input', {
        template: '#roll-input',
        setup(props, { emit }) {

            const numValue = ref(1);

            function handleClick(v) {
                // 触发事件，传递参数
                emit("update:modelValue", v);
            }

            function handleChange() {
                // 触发事件，传递参数
                emit("update:modelValue", numValue.value);
            }

            return {
                handleClick, numValue, handleChange
            }
        },
        // 非setup情况下，注册父传子的参数仍然和vue2语法一样
        props: {
            title: {
                type: String,
                default: "第一投"
            },
            modelValue: {
                type: Object,
                default: ""
            },
            // 最小值
            min: {
                type: Number,
                default: 1
            }
        }
    })

    // 挂载节点
    app.mount("#app");

</script>

</html>